<template>
	<view class="item" @click="to('/pages/IndexPages/doctorDetail/main?id=' + item.id)">
		<view class="title">
			<view>{{ item.doctorName }}</view>
			<!-- 0-未知  1男 2女 -->
			<image v-if="item.sex == '2'" src="/static/images/female.png" />
			<image v-if="item.sex == '1'" src="/static/images/male.png" />
			<view>{{ (item.departmentName || '') + '&nbsp;' + (item.doctorPosition || '') }}</view>
		</view>
		<view class="wrap">
			<text>{{ item.hospitalName }}</text>
		</view>
		<view class="specialty">
			擅长：
			<text>{{ item.specialty || '暂无' }}</text>
		</view>
		<view class="evaluation">
			<view>
				<text>好评率</text>
				<text>{{ item.positiveRate }}%</text>
			</view>
			<view>
				<text>关注数</text>
				<text>{{ item.attentionNumber }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'doctor-item',
	props: {
		item: {
			type: Object,
			defaultValue: {}
		}
	},
	data() {
		return {};
	},
	methods: {
		to(page) {
			uni.navigateTo({
				url: page
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.item {
	padding: 30rpx;
	border-bottom: 2rpx solid #ececec;

	view {
		display: flex;
		align-items: center;
	}

	.title {
		view:nth-child(1) {
			font-size: 36rpx;
		}

		image {
			width: 36rpx;
			height: 36rpx;
			margin: 0 10rpx;
		}

		view:nth-child(3) {
			font-size: 30rpx;
		}
	}

	.wrap {
		margin-top: 10upx;
		font-size: 32upx;
	}

	.specialty {
		display: -webkit-box;
		margin-top: 10upx;
		font-size: 30rpx;

		text {
			color: #666666;
		}
	}

	.evaluation {
		margin-top: 15rpx;

		view {
			font-size: 28rpx;

			&:nth-child(1) {
				width: 30%;
			}

			text {
				&:last-child {
					color: red;
				}
			}
		}
	}
}
</style>
